<template>
	<image :src="local||info.imgUrl" :style="{width: `${layout.w}rpx`,height:`${layout.h}rpx`}" class="msg_pic" mode="aspectFill"/>
</template>

<script>
	export default{
		props:{
			info:{
				required:true,
				type:Object
			},
			local:{
				type:String
			}
		},
		computed:{
			layout(){
				if(this.info.width<400){
					return{
						w:this.info.width,
						h:this.info.height
					}
				}
				return{
					w:400,
					h:this.info.height*400/this.info.width
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg_pic{
		max-width: 400rpx;
		border-radius: 10rpx;
	}
</style>
